<template>
  <div>
     <!-- 预览管理员 渲染数据  -->
     <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>管理员列表</span>
        <el-button type="primary" size="mini" @click="addCateShowDialogBtnFn">添加管理员</el-button>
      </div>
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="序号"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="昵称"
            width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
      </el-table-column>
        <el-table-column
          label="姓名"
          width="300">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
     <!-- 添加管理员 -->
     <el-dialog
     title="添加用户"
     :visible.sync="dialogVisible"
     width="30%"
     @close="dialogCloseFn"
     >
     <el-form :model="addForm" :rules="addRules" ref="addRef" label-width="80px">
       <el-form-item label="用户账号" prop="cate_name">
         <el-input v-model="addForm.cate_name" minlength="1" maxlength="10"></el-input>
       </el-form-item>
       <el-form-item label="用户密码" prop="cate_alias">
         <el-input v-model="addForm.cate_alias" minlength="1" maxlength="15"></el-input>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
   <el-button @click="dialogVisible = false">取 消</el-button>
   <el-button type="primary" @click="confirmFn">确 定</el-button>
 </span>
   </el-dialog>
  </div>

</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      cateList: [], // 文章分类列表
      dialogVisible: false, // 控制对话框的出现/隐藏
      addForm: { // 添加表单的数据对象
        cate_name: '',
        cate_alias: ''
      },
      addRules: { // 添加表单的验证规则对象
        cate_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '分类名必须是1-10位的非空字符', trigger: 'blur' }
        ],
        cate_alias: [
          { required: true, message: '请输入分类别名', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{1,15}$/, message: '分类别名必须是1-15位的字母数字', trigger: 'blur' }
        ]
      },
      isEdit: false, // true为编辑状态 false为新增状态
      editId: '' // 保存正在要编辑的数据id值
    }
  },
  methods: {

  }
}
</script>
<style lang="less" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
